{% extends "layout.html" %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- 通知区域 -->
    <div id="notification" class="notification hidden"></div>

    <!-- 导航链接 -->
    <div class="mb-8">
        <nav class="flex space-x-4">
            <a href="{{ url_for('scan') }}" class="nav-link">扫描管理</a>
            <a href="{{ url_for('batch') }}" class="nav-link">批次管理</a>
            <a href="{{ url_for('report') }}" class="nav-link">报表管理</a>
            <a href="{{ url_for('txconfig') }}" class="nav-link active">通信配置</a>
        </nav>
    </div>

    <!-- 通信状态 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 class="text-xl font-bold mb-4">通信状态</h2>
        <div class="grid grid-cols-2 gap-4">
            <!-- WebSocket 状态 -->
            <div class="border-r pr-4">
                <h3 class="text-lg font-semibold mb-2">WebSocket</h3>
                <div class="space-y-2">
                    <div class="status-item">
                        <span class="label">连接状态：</span>
                        <span id="wsConnectionStatus" class="status-disconnected">未连接</span>
                    </div>
                    <div class="status-item">
                        <span class="label">最后连接时间：</span>
                        <span id="wsLastConnectedTime">-</span>
                    </div>
                    <div class="status-item">
                        <span class="label">最后错误：</span>
                        <span id="wsLastError">无</span>
                    </div>
                </div>
            </div>
            
            <!-- WebRTC 状态 -->
            <div class="pl-4">
                <h3 class="text-lg font-semibold mb-2">WebRTC</h3>
                <div class="space-y-2">
                    <div class="status-item">
                        <span class="label">连接状态：</span>
                        <span id="rtcConnectionStatus" class="status-disconnected">未连接</span>
                    </div>
                    <div class="status-item">
                        <span class="label">最后连接时间：</span>
                        <span id="rtcLastConnectedTime">-</span>
                    </div>
                    <div class="status-item">
                        <span class="label">最后错误：</span>
                        <span id="rtcLastError">无</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- WebSocket 配置 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 class="text-xl font-bold mb-4">WebSocket 配置</h2>
        <form id="wsConfigForm" class="space-y-6">
            <!-- 基本设置 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="form-group">
                    <label for="serverUrl">服务器地址</label>
                    <input type="text" id="serverUrl" name="serverUrl" class="form-input" required>
                </div>
                <div class="form-group">
                    <label for="port">端口</label>
                    <input type="number" id="port" name="port" class="form-input" min="1" max="65535" required>
                </div>
                <div class="form-group">
                    <label for="protocol">协议</label>
                    <select id="protocol" name="protocol" class="form-select">
                        <option value="ws">ws</option>
                        <option value="wss">wss</option>
                    </select>
                </div>
            </div>

            <!-- 高级设置 -->
            <div class="mt-8">
                <h3 class="text-lg font-semibold mb-4">高级设置</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="form-group">
                        <label for="reconnectInterval">重连间隔 (ms)</label>
                        <input type="number" id="reconnectInterval" name="reconnectInterval" class="form-input" min="1000">
                    </div>
                    <div class="form-group">
                        <label for="maxRetries">最大重试次数</label>
                        <input type="number" id="maxRetries" name="maxRetries" class="form-input" min="1">
                    </div>
                    <div class="form-group">
                        <label for="timeout">超时时间 (ms)</label>
                        <input type="number" id="timeout" name="timeout" class="form-input" min="1000">
                    </div>
                    <div class="form-group">
                        <label class="flex items-center space-x-2">
                            <input type="checkbox" id="enabled" name="enabled" class="form-checkbox">
                            <span>启用通信</span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- WebSocket 操作按钮 -->
            <div class="flex space-x-4 mt-8">
                <button type="button" id="testWsConnection" class="btn btn-secondary">测试 WebSocket 连接</button>
                <button type="button" id="saveWsConfig" class="btn btn-primary">保存 WebSocket 配置</button>
            </div>
        </form>
    </div>

    <!-- WebRTC 配置 -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-bold mb-4">WebRTC 配置</h2>
        <form id="rtcConfigForm" class="space-y-6">
            <div class="form-group">
                <label class="flex items-center space-x-2 mb-4">
                    <input type="checkbox" id="webrtcEnabled" name="webrtcEnabled" class="form-checkbox">
                    <span>启用 WebRTC</span>
                </label>
            </div>
            
            <div id="webrtcConfig" class="space-y-6">
                <div class="form-group">
                    <label for="webrtcIceServers">ICE 服务器配置</label>
                    <textarea id="webrtcIceServers" name="webrtcIceServers" 
                            class="form-textarea" rows="4" 
                            placeholder='[{"urls": ["stun:stun.l.google.com:19302"]}]'></textarea>
                    <small class="text-gray-500 mt-1">JSON 格式的 ICE 服务器配置</small>
                </div>
                
                <div class="form-group">
                    <label for="webrtcPeerConnectionConfig">对等连接配置</label>
                    <textarea id="webrtcPeerConnectionConfig" name="webrtcPeerConnectionConfig" 
                            class="form-textarea" rows="4"
                            placeholder='{"iceServers": [{"urls": ["stun:stun.l.google.com:19302"]}]}'></textarea>
                    <small class="text-gray-500 mt-1">JSON 格式的 RTCPeerConnection 配置</small>
                </div>
                
                <div class="form-group">
                    <label for="webrtcDataChannelConfig">数据通道配置</label>
                    <textarea id="webrtcDataChannelConfig" name="webrtcDataChannelConfig" 
                            class="form-textarea" rows="4"
                            placeholder='{"ordered": true}'></textarea>
                    <small class="text-gray-500 mt-1">JSON 格式的 RTCDataChannel 配置</small>
                </div>
            </div>

            <!-- WebRTC 操作按钮 -->
            <div class="flex space-x-4 mt-8">
                <button type="button" id="testRtcConnection" class="btn btn-secondary">测试 WebRTC 连接</button>
                <button type="button" id="saveRtcConfig" class="btn btn-primary">保存 WebRTC 配置</button>
            </div>
        </form>
    </div>
</div>

<!-- 样式 -->
<style>
.notification {
    position: fixed;
    top: 1rem;
    right: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    z-index: 50;
    display: none;
}

.notification.success {
    background-color: #10B981;
    color: white;
}

.notification.error {
    background-color: #EF4444;
    color: white;
}

.status-connected {
    color: #10B981;
}

.status-disconnected {
    color: #EF4444;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-input,
.form-select,
.form-textarea {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    width: 100%;
}

.form-textarea {
    font-family: monospace;
}

.btn {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
}

.btn-primary {
    background-color: #3B82F6;
    color: white;
}

.btn-secondary {
    background-color: #6B7280;
    color: white;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.label {
    color: #6B7280;
}

#webrtcConfig {
    transition: all 0.3s ease-in-out;
}

#webrtcConfig.hidden {
    display: none;
}
</style>

<!-- 脚本 -->
{% block scripts %}
<script src="{{ url_for('static', filename='js/communication.js') }}"></script>
{% endblock %}
{% endblock %} 